<template>
  <div class="area-select-root">
    <el-cascader
      placeholder="请选择区域"
      :props="areaProps"
      v-model="bufferArea"
      clearable v-bind="proxy"></el-cascader>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, ref, computed, watch } from '@vue/composition-api'
import { areaDict } from '@/api/industry/dict'

let id = 0
export default {
  name: 'areaSelect',
  props: {
    proxy: Object,
    area: {
      type: Array,
      default: () => []
    }
  },
  model: {
    prop: 'area',
    event: 'submit'
  },
  components: {},
  setup(props, content) {

    let { area } = props

    const data = reactive({
      areaProps: {
        checkStrictly: true,
        lazy: true,
        lazyLoad({ level, value = 'province' }, resolve) {
          areaDict(value).then(({ data }) => {
            resolve(data.map(({ code: value, name: label }) => {
              return { value, label, leaf: level == 2 }
            }))
          })
        }
      },
      bufferArea: JSON.parse(JSON.stringify(area))            //  选中的区域
    })

    watch(() => data.bufferArea, val => {
      let { area } = props
      if (val !== area && JSON.stringify(val) !== JSON.stringify(area)) {
        content.emit('submit', val)
        content.emit('change', val)
      }
    })

    watch(() => props.area, val => {
      let { area } = props
      if (val !== data.bufferArea && JSON.stringify(val) !== JSON.stringify(data.bufferArea)) {
        data.bufferArea = JSON.parse(JSON.stringify(area))
      }
    })

    return { ...toRefs(data) }
  }
}
</script>

<style scoped lang="scss">
$full: 100%;
.area-select-root {
}
</style>
